<template>
  <div class="text-center py-12">
    <div class="w-16 h-16 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center">
      <component :is="icon" class="w-8 h-8 text-gray-400" />
    </div>
    <h3 class="text-lg font-medium text-gray-900 mb-2">{{ title }}</h3>
    <p class="text-gray-500 mb-4">{{ description }}</p>
    <div v-if="showAction" class="flex justify-center">
      <Button 
        :variant="actionVariant"
        :size="actionSize"
        @click="handleAction"
      >
        {{ actionText }}
      </Button>
    </div>
  </div>
</template>

<script setup lang="ts">
import Button from '@/components/ui/Button.vue'

interface Props {
  title: string
  description: string
  icon?: any
  showAction?: boolean
  actionText?: string
  actionVariant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'
  actionSize?: 'sm' | 'md' | 'lg'
}

const props = withDefaults(defineProps<Props>(), {
  icon: 'div',
  showAction: false,
  actionText: '重试',
  actionVariant: 'primary',
  actionSize: 'md'
})

const emit = defineEmits<{
  action: []
}>()

const handleAction = () => {
  emit('action')
}
</script>
